<template>
    <div>
      <nav-top title="德胜棋牌房卡系统"></nav-top>
      <header>
        <div class="headerTop clearfix">
          <div class="headerTopImg fl">
            <img :src="topPic" class="photo" alt="">
          </div>

          <div class="headerToptext fl">
            <p class="headerToptextLeft clearfix">
              <span class="captainName">{{name}}</span>
              <span class="captain">{{Rank}}</span>
            </p>
            <p class="headerToptextRight clearfix">
              <span class="roomCard">房卡:<b>{{roomCard}}</b></span>
              <span class="glod">金币:<b>{{gold}}</b></span>
            </p>
          </div>
        </div>
        <ul class="headerBottom clearfix" v-show="isRank==='3'">
          <li class="fl">
            <span class="totalIncome">{{todayIcone}}</span>
            <span>今日总收益</span>
          </li>
          <li class="fl">
            <span class="withdrawals">{{cash}}</span>
            <router-link to="/cash">
              <span><button class="withdrawalsBtn">立即提现</button></span>
            </router-link>
          </li>
        </ul>
        <ul class="headerBottom clearfix" v-show="isRank==='2'">
          <li class="fl">
            <span class="todaySell">{{todaySell}}</span>
            <span>今日售卡</span>
          </li>
          <li class="fl">
            <span class="amount">{{cash}}</span>
            <router-link to="/cash">
              <span><button class="withdrawalsBtn">立即提现</button></span>
            </router-link>
          </li>
          <li class="fl">
            <span class="clubConsume">{{clubConsume}}</span>
            <span>俱乐部消耗</span>
          </li>
          <li class="fl">
            <span class="memberTotal">{{memberTotal}}</span>
            <span>总玩家</span>
          </li>
        </ul>
        <ul class="headerBottom clearfix" v-show="isRank==='1'">
          <li class="fl">
            <span class="todaySell">{{todaySell}}</span>
            <span>今日售卡</span>
          </li>
          <li class="fl">
            <span class="clubConsume">{{clubConsume}}</span>
            <span>俱乐部消耗</span>
          </li>
          <li class="fl">
            <span class="clubTotal">{{clubTotal}}</span>
            <span>俱乐部总数</span>
          </li>
          <li class="fl">
            <span class="memberTotal">{{memberTotal}}</span>
            <span>代理商总数</span>
          </li>
        </ul>
      </header>
      <ul class="main">
        <!--<li><a href="leaderRoomCardSearch.html"><span>房卡</span><em></em></a></li>-->
        <!--<li><a href="leaderIncomeQuery.html"><span>收益查询</span><em></em></a></li>-->
        <!--<li><a href="leaderWithdrawalsQuery.html"><span>提现查询</span><em></em></a></li>-->
        <!--<li><a href="leaderClubDetails.html"><span>俱乐部详情</span><em></em></a></li>-->
        <!--<li><a href="leaderUserInfo.html"><span>个人信息</span><em></em></a></li>-->
        <!--<li><a href="about.html?grade=3"><span>关于</span><em></em></a></li>-->
        <!--<li onclick="clearLogin()"><span>退出</span></li>-->
        <li v-for="(list, index) in lists" :key="index">
          <router-link :to="list.toPath">
            <span>{{list.content}}</span>
            <em v-show="lists.length-1 > index"></em>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
  import navTop from '../components/navTop.vue'
  import reqData from '../ajax/ajax.js'
  export default {
    name: '',
    data () {
      return {
        isRank: '',                 /** 判断等级权限 */
        lists: [],                  /** 列表中的内容 */
        topPic: '',                 /** 图片的地址 */
        name: '',                   /** 名称 */
        Rank: '',                   /** 当前账号的等级 */
        roomCard: 0,                /** 房卡数量 */
        gold: 0,                    /** 房卡金币 */
        todayIcone: 0,              /** 房卡数量 */
        cash: 0,                    /** 可提现数量 */
        todaySell: 0,               /** 今日售卡 */
        clubConsume: 0,             /** 俱乐部消耗 */
        memberTotal: 0,             /** 总玩家 */
        clubTotal: 0                /** 俱乐部总数 */
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        let self = this
        let rank = JSON.parse(localStorage.getItem('userInfo')).rank
        this.isRank = rank
        if (rank === '3') {
          reqData(this.Url + '/room/home/info', 'get', {}, function (data) {
            if (data.status === 0) {
              self.lists = [{
                content: '房卡',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'roomCard'
                  }
                }
              },
              {
                content: '收益查询',
                toPath: {
                  name: 'incomeSearch',
                  params: {
                    title: '1'
                  }
                }
              },
              {
                content: '提现查询',
                toPath: {
                  name: 'incomeSearch',
                  params: {
                    title: '2'
                  }
                }
              },
              {
                content: '俱乐部详情',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'culbList'
                  }
                }
              },
              {
                content: '个人信息',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'useInfo'
                  }
                }
              },
              {
                content: '关于',
                toPath: '/about'
              },
              {
                content: '退出',
                toPath: '/'
              }]
              self.topPic = data.data.portraitUrl
              self.name = data.data.nickname
              self.Rank = data.data.rankName
              self.roomCard = data.data.roomCard
              self.gold = data.data.gold
              self.todayIcone = data.data.todayIncome
              self.cash = data.data.totalIncome
            }
          })
        } else if (rank === '2') {
          reqData(this.Url + '/room/home/info', 'get', {}, function (data) {
            if (data.status === 0) {
              self.lists = [{
                content: '房卡',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'roomCard'
                  }
                }
              },
              {
                content: '组建俱乐部',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'createClub'
                  }
                }
              },
              {
                content: '俱乐部详情',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'clubDetails'
                  }
                }
              },
              {
                content: '个人信息',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'useInfo'
                  }
                }
              },
              {
                content: '关于',
                toPath: '/about'
              },
              {
                content: '退出',
                toPath: '/'
              }]
              self.topPic = data.data.portraitUrl
              self.name = data.data.nickname
              self.Rank = data.data.rankName
              self.roomCard = data.data.roomCard
              self.gold = data.data.gold
              self.todaySell = data.data.todaySell
              self.cash = data.data.totalIncome
              self.clubConsume = data.data.clubConsume
              self.memberTotal = data.data.memberTotal
            }
          })
        } else if (rank === '1') {
          reqData(this.Url + '/room/home/info', 'get', {}, function (data) {
            if (data.status === 0) {
              self.lists = [{
                content: '房卡',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'roomCard'
                  }
                }
              },
              {
                content: '代理商管理',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'totalAdmin'
                  }
                }
              },
//              {
//                content: '数据统计',
//                toPath: '/'
//              },
              {
                content: '个人信息',
                toPath: {
                  name: 'roomCardClass',
                  params: {
                    id: 'useInfo'
                  }
                }
              },
              {
                content: '关于',
                toPath: '/about'
              },
              {
                content: '退出',
                toPath: '/'
              }]
              self.topPic = data.data.portraitUrl
              self.name = data.data.nickname
              self.Rank = data.data.rankName
              self.roomCard = data.data.roomCard
              self.gold = data.data.gold
              self.todaySell = data.data.todaySell
              self.clubConsume = data.data.clubConsume
              self.clubTotal = data.data.clubTotal
              self.memberTotal = data.data.memberTotal
            }
          })
        }
      })
    },
    components: {
      navTop
    }
  }
</script>
<style lang="less" scoped>
  .headerTop {
    background-color: #fff;
    border-bottom: 1px solid #E8E8E8;
    height: 1.78rem;
    padding: 0.2rem 0 0 0.22rem;
  }
  .headerTop .headerTopImg {
    width: 1.62rem;
    height: 1.62rem;
  }
  .headerTop .headerTopImg img {
    width: 1.62rem;
    height: 1.62rem;
  }
  .headerTop .headerToptext span {
    display: block;
    float: left;
    padding-left: 0.2rem;
  }
  .headerTop .headerToptext .headerToptextLeft {
    line-height: 0.82rem;
    height: 0.82rem;
  }
  .headerTop .headerToptext .headerToptextLeft .captainName {
    font-weight: bold;
    width: 2.34rem;
    font-size: 0.38rem;
  }
  .headerTop .headerToptext .headerToptextLeft .captain {
    color: #8D8B8B ;
  }
  .headerTop .headerToptext .headerToptextRight {
    line-height: 0.8rem;
    font-size: 0.38rem;
    color: #FF9A79;
  }
  .headerTop .headerToptext .headerToptextRight .roomCard {
    width: 2.34rem;
  }
  .headerBottom {
    background-color: #fff;
    margin-top: 0.3rem;
    border-top: 0.02rem solid #E8E8E8;
  }
  .headerBottom li:nth-of-type(1),
  .headerBottom li:nth-of-type(3) {
    border-right: 1px solid #E8E8E8;
  }
  .headerBottom li {
    border-bottom: 0.02rem solid #E8E8E8;
    line-height: 0.6rem;
    height: 1.2rem;
    text-align: center;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .headerBottom li span {
    display: block;
  }
  .headerBottom li span:first-child {
    line-height: 0.66rem;
    color: #FF9B79;
    font-size: 0.38rem;
  }
  .headerBottom li span:last-child {
    line-height: 0.46rem;
    font-weight: bold;
    font-size: 0.3rem;
  }
  .headerBottom li .withdrawalsBtn{
    height: 0.4rem;
    line-height: 0.4rem;
    background-color: #00B322;
    color: #fff;
    display: inline-block;
    margin: 0.05rem 0;
    width: 1.9rem;
    border-radius: 0.1rem;
    border:none;
    outline: none;
    padding:0;
  }
  .main {
    font-weight: bold;
    margin-top: 0.3rem;
    border-top: 0.02rem solid #E8E8E8;
    background-color: #fff;
  }
  .main li {
    height: 1rem;
    line-height: 1rem;
    padding-left: 0.22rem;
    border-bottom: 0.02rem solid #E8E8E8;
    position: relative;
  }
  .main li em {
    height: 0.52rem;
    width: 0.32rem;
    position: absolute;
    top: 0.22rem;
    right: 0.22rem;
    background: url("../assets/img/leftrow.png") no-repeat;
    background-size: 100%;
  }
</style>
